<template>
  <!-- 复杂演示 -->
  <!-- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="reset">取消</el-button>
    </el-form-item>
  </el-form> -->
  <!-- 简单例子讲解 -->
  <el-form label-width="80px" ref="form" :model="form" :rules="rules">
    <el-form-item label="用户名" prop="mobile">
      <el-input v-model="form.mobile"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="code">
      <el-input v-model="form.code"></el-input>
    </el-form-item>
    <el-form-item label="其它">
      <el-input v-model="form.other"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <!-- 不能重置没有参与校验字段数据 -->
      <el-button @click="$refs.form.resetFields()">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data () {
    var validateMobile = (rule, value, callback) => {
      if (!/^1[0-9]{10}$/.test(value)) {
        return callback(new Error('手机号格式不对喽~'))
      }
      // 必须
      callback()

    }
    return {
      // form: {
      //   name: '',
      //   region: '',
      //   desc: ''
      // },
      // rules: {
      //   name: [{ required: true, message: '必填！', trigger: ['blur', 'change'] }]
      // }
      // 表单数据
      form: {
        mobile: '',
        code: '',
        other: ''
      },
      // 校验规则数据
      rules: {
        // 当有多条规则时会按照顺序依次往下校验
        code: [
          { required: true, message: '密码为必填项', trigger: 'blur' },
          { min: 6, max: 8, message: '长度为6-8位', trigger: ['blur', 'change'] }
        ],
        // 复杂校验
        mobile: [{ validator: validateMobile, trigger: 'blur' }]
      }
    }
  },
  methods: {
    async onSubmit () {
      try {
        await this.$refs.form.validate()
        console.log(this.form)
      } catch (error) {
        console.log(error)
      }
    },
    reset () {
      this.$refs.form.resetFields()
    }
  }
}
</script>